<!DOCTYPE html>
<html>
<head>
    <title>Canvas Translate Rectangle</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
    <button id="moveButton">scale Rectangle</button>

    <script>
      let canvas = document.getElementById('myCanvas');
      let ctx = canvas.getContext('2d');

      let x = 150, y = 150, width = 100, height = 50, scale = 1
      let moveButton = document.getElementById('moveButton');

      function moveRect() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        // 将图形移动到画布中心
        ctx.scale(scale, scale);
        /**
         * 保持中心点不变
         * 1. 先将画布的原点移动到矩形的中心点
         * 2. 缩放画布
         * 3. 将画布的原点移动到矩形的左上角
         * x / scale, y / scale: 矩形的左上角坐标;这是因为缩放是以画布的原点为中心进行缩放的
         * scale: 缩放比例
         * 画布原点的计算公式：(x, y) = (x / scale, y / scale)
         * 画布的原点是指画布的左上角
         * 当缩放比例为1时，画布的原点就是画布的左上角
         * 当缩放比例大于1时，画布的原点会向右下角移动， 为什么向右下角移动？
         *  画布向右下角移动的现象通常是由于“像素对齐”（pixel snapping）问题或者坐标系中心点的变化引起的。以下是一些可能导致这种现象的原因：
         *  当你放大画布上的图形时，如果放大操作不是基于图形的中心点进行的，图形的边界可能会与像素网格对齐，导致图形在视觉上发生移动。
         *  在Canvas中，默认的坐标系原点位于左上角。如果你使用scale变换，画布上的所有图形都会按照原点为中心进行缩放。如果图形不在原点，缩放后图形的位置会发生变化。
         *  如果在缩放前没有正确设置缩放中心点，使用ctx.scale(2, 2);这样的操作会导致画布上的所有内容相对于左上角进行缩放，从而可能导致整体向右下角移动。
         * 避免以上情况所采取的措施：
         *  设置缩放中心：在使用scale方法之前，使用translate方法将画布上的图形移动到画布中心，然后再进行缩放。缩放完成后，可以再次使用translate将图形移回原来的位置。
         *  使用矩阵变换：通过自定义的矩阵变换来实现缩放，同时保持图形位置不变。
         *  调整坐标：在缩放后，根据缩放比例调整图形的绘制坐标，以补偿可能的位置偏移。
         * 当缩放比例小于1时，画布的原点会向左上角移动
        */
        ctx.fillRect(x / scale, y / scale, width, height);
        ctx.restore();
        scale += 0.1;

        if (scale > 2) {
          scale = 1;
        }
      }
      moveRect();
      moveButton.addEventListener('click', moveRect)
    </script>
</body>
</html>